<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/app.css">
</head>
<body>
    <div id="root">
        <!-- 左侧结构 start -->
        <div class="left col-xs-2">
            <div class="logo">
                <!-- img-responsive 图片最大宽度为父级元素的 100% -->
                <img class="img-responsive" src="./images/logo.png" alt="">
            </div>            
            <hr>
            <div class="menu">
                <div class="list-group">
                    <a href="#" class="list-group-item active">
                      图书管理
                    </a>
                    <a href="#" class="list-group-item">用户管理</a>
                </div>
            </div>
        </div>
        <!-- 左侧结构 end -->

        <!-- 右侧结构 -->
        <div class="right col-xs-10 no-padding">
            <!-- 顶部导航 -->
            <div class="top-menu text-right">
                <span>XIAO-HIGH</span> &nbsp;&nbsp;
                <span>退出</span>
            </div>

            <!-- 主题内容 -->
            <div class="content">
                <h2>图书列表 <a class="btn btn-primary btn-xs" href="">添加书籍</a></h2>
                <div class="clearfix"></div>
                <hr>
                <div class="form">
                    <div class="col-xs-3 col-xs-offset-9">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="输入您的关键字">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">搜索</button>
                            </span>
                        </div><!-- /input-group -->
                    </div>
                </div>
                <div class="clearfix"></div>
                <hr>
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>价格</th>
                        <th>封面</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">1</th>
                        <td>西游记</td>
                        <td>吴承恩</td>
                        <td>150.6</td>
                        <td></td>
                        <td>
                            <a class="btn btn-info btn-xs" href="">修改</a>
                            <a class="btn btn-danger btn-xs" href="">删除</a>
                        </td>
                      </tr>
                      
                    </tbody>
                  </table>
            </div>
        </div>
    </div>
    <script src="./bootstrap/js/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
</body>
</html>